<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>实名认证</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table :data="tableData" stripe border="" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="name" label="用户昵称"> </el-table-column>
        <el-table-column prop="user_tel" label="手机号"> </el-table-column>
        <el-table-column prop="user_email" label="邮箱"> </el-table-column>
        <el-table-column prop="createTime" label="申请时间"> </el-table-column>
        <el-table-column prop="zidImg" label="身份正面">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.fidImg"
              title="身份证正面"
              style="width: 100px;    height: 66.5px; "
              :src="scope.row.zidImg"
              :preview-src-list="[scope.row.zidImg]"
            >
            </el-image>
            <!-- <img :src="scope.row.zidImg" alt="身份证正面" srcset="" style="width: 100px;" > -->
          </template>
        </el-table-column>
        <el-table-column prop="fidImg" label="身份反面">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.fidImg"
              title="身份证反面"
              style="width: 100px;height: 66.5px;"
              :src="scope.row.fidImg"
              :preview-src-list="[scope.row.fidImg]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="cardId" label="身份证号"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.isPass === 1"
              >成功</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-else-if="scope.row.isPass === 2"
              >进行中</el-button
            >
            <el-button type="primary" size="mini" v-else>失败</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.isPass !== 2"
              style="margin-bottom: 5px;"
              size="mini"
              type="success"
              @click="isPassCheck(scope.row.id, 1)"
              >通过审核</el-button
            >
            <el-button
              :disabled="scope.row.isPass !== 2"
              style="margin-bottom: 5px;margin-left: 0px;"
              size="mini"
              type="danger"
              @click="isPassCheck(scope.row.id, 3)"
              >拒绝审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryinfo: {
        userTel: "",
        userEmail: "",
        pageIndex: 1,
        pageSize: 10,
        status: "2",
        type: "2",
      },
      total: 0,
      tableData: [],
    };
  },
  created() {
    this.getmsgList();
  },
  methods: {
    // 是否通过审核
    async isPassCheck(id, isPass) {
      const data = {
        id,
        isPass,
      };
      const confirmResult = await this.$confirm(
        "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消");
      }
      const { data: res } = await this.$http.post(
        "currencyAudit/putSmList",
        this.httputil(data)
      );
      if (res.code !== 200) return this.$message.error(res.data);
      this.$message.success(res.data);
      this.getmsgList();
    },
    // 获取实名认证列表
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getSmList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.list;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getmsgList();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryinfo.pageIndex = newCurrent;
      this.getmsgList();
    },
  },
};
</script>
